<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="recommend_title">精选推荐</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <el-col
        :span="11"
        class="flight_card"
        v-for="item in recommend_flight"
        :key="item.id"
        :value="item.id"
        @click.native="flight_detail(item)"
      >
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div style="padding: 14px;">
            <span>{{ item.from_place }}</span
            >--
            <span>{{ item.to_place }}</span>
            <span class="price">￥{{ item.economy_class_price }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ formatTime(item.start_time) }}</time>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-card>

    <div class="dialog">
      <el-dialog :title="title" :visible.sync="dialog_status" width="1000px" :lock-scroll="false">
        <!-- 机票列表子组件 -->
        <flight_table :flight_detail_data="flight_detail_data"/>
      </el-dialog>
    </div>
    
  </div>
</template>

<script>
import request from "../../request/http";
import flightdialog from "./dialog";
import flight_table from './table'
const myDate = new Date();
export default {
  name: "recommend",
  data() {
    return {
      flaight: [1, 2, 3, 4],
      recommend_flight: [],
      params: "",
      dialog_status: false,
      title: "",
      flight_detail_data: [],
    };
  },
  components: {
    flightdialog,
    flight_table,
  },
  created() {
    this.get_recommend_flight();
  },
  methods: {
    // 获取精选推荐数据，只显示6条数据
    get_recommend_flight() {
      var time = myDate.toLocaleDateString();

      request({
        url: "/flight/get-recommend-flight/",
      })
        .then((res) => {
          this.recommend_flight = res.data.slice(0, 6);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    flight_detail(item) {
      this.params = {
        from_place: item.from_place,
        to_place: item.to_place,
      };
      this.title =
        "选择旅程：" + this.params.from_place + "-->" + this.params.to_place;
      request({
        url: "/flight/get-flight-info/",
        params: this.params,
      })
        .then((res) => {
          this.flight_detail_data = res.data;
        })
        .catch((err) => {
          this.$message.error("获取机票失败");
          console.log(err);
        });
      this.dialog_status = true;
    },
    // 格式化时间
    formatTime(date) {
      var json_date = new Date(date);
      var ysar = json_date.getFullYear();
      var month = json_date.getMonth() + 1;
      var day = json_date.getDate();
      var hours = json_date.getHours();
      var minutes = json_date.getMinutes();
      if (month < 10) {
          month = '0' + String(month)
      }
      if (day < 10) {
          day = '0' + String(day)
      }
      if (hours < 10) {
          hours = '0' + String(hours)
      }
      if (minutes < 10) {
          minutes = '0' + String(minutes)
      }
      var datetime =
        ysar + "-" + month + "-" + day + " " + hours + ":" + minutes;
      return datetime;
    },
  },
};
</script>

<style>
.recommend_title {
  font-size: 20px;
}
.flight_card {
  margin-bottom: 10px;
  margin-right: 10px;
}
.flight_card:hover {
  cursor: pointer;
}
.price {
  float: right;
  color: #ff7700;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.time {
  font-size: 13px;
  color: #999;
}
</style>
